<template>
  <div class="global-header-container">
    <img class="logo" src="@/assets/img/global_header/logo.png" @click="handleJumpToHome"/>
    <ul class="menus">
      <li :class="{
        'active': index === currentSelectMenu
      }"
          @click="handleJump(item, index)"
          v-for="(item, index) in menus"
          :key="index">{{item.name}}
      </li>
    </ul>
    <div class="right-box">
      <div class="apply-for-trial">{{$t('applyForTrial')}}</div>
      <div class="lang-box">
        <span>{{localText === 'zh' ? '简体中文' : 'English'}}</span>
        <el-dropdown>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="handleChangeLang('zh')">简体中文</el-dropdown-item>
              <el-dropdown-item @click="handleChangeLang('en')">English</el-dropdown-item>
            </el-dropdown-menu>
          </template>
          <i class="el-icon el-tooltip__trigger" aria-label="请选择您的语言"
             style="font-size: 24px;color: #ffffff">
            <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" width="1.2em" height="1.2em"
                 data-v-12008bb2="">
              <path fill="currentColor"
                    d="m18.5 10l4.4 11h-2.155l-1.201-3h-4.09l-1.199 3h-2.154L16.5 10h2zM10 2v2h6v2h-1.968a18.222 18.222 0 0 1-3.62 6.301a14.864 14.864 0 0 0 2.336 1.707l-.751 1.878A17.015 17.015 0 0 1 9 13.725a16.676 16.676 0 0 1-6.201 3.548l-.536-1.929a14.7 14.7 0 0 0 5.327-3.042A18.078 18.078 0 0 1 4.767 8h2.24A16.032 16.032 0 0 0 9 10.877a16.165 16.165 0 0 0 2.91-4.876L2 6V4h6V2h2zm7.5 10.885L16.253 16h2.492L17.5 12.885z"/>
            </svg>
          </i>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { local, changeLocal } from '@/hooks/up-local.js'
import { menuList } from './menuList.js'

export default {
  setup () {
    const menus = reactive(menuList)
    const localText = ref(local)
    const currentSelectMenu = ref(0)
    const router = useRouter()

    function handleJump (val, index) {
      const { path } = val
      router.push(path)
      currentSelectMenu.value = index
    }

    function handleJumpToHome () {
      router.push('/')
    }

    function handleChangeLang (val) {
      changeLocal(val)
    }

    return {
      menus,
      localText,
      currentSelectMenu,
      handleJumpToHome,
      handleChangeLang,
      handleJump
    }
  }
}

</script>

<style lang="scss" scoped>
.global-header-container {
  background-color: #0E54A5;
  height: 90px;
  position: sticky;
  top: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 80px;

  .logo {
    width: 172px;
    height: 32px;
    cursor: pointer;
  }

  .menus {
    display: flex;
    line-height: 90px;

    li {
      padding: 0 12px;
      margin: 0 24px;
      color: rgba(255, 255, 255, 0.7);
      cursor: pointer;
      font-size: 18px;
      position: relative;

      &:after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px;
        bottom: 0;
        background-color: #fff;
        left: 0;
      }


      &:hover, &.active {
        color: rgba(255, 255, 255, 1);

        &:after {
          transition: all ease-in 0.3s;
          width: 100%;
        }
      }
    }
  }

  .right-box {
    display: flex;
    align-items: center;

    .apply-for-trial {
      width: 150px;
      height: 40px;
      border-radius: 4px;
      background: linear-gradient(to bottom, #3A8AE7, #0F65C9);
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      color: #ffffff;
      font-size: 14px;

      &:hover {
        transition: all 0.3s;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
    }

    > .lang-box {
      margin-left: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;

      span {
        padding-right: 5px;
        color: #ffffff;
      }

    }
  }
}
</style>